<template>
	<view>
		<SearchInput></SearchInput>
		<Tabs :tabs="tabs" @tabsItemChange="tabsItemChange">
			<block v-if="tabs[0].isActive">
				<view class="first_tab">
					<navigator class="goods_item" v-for="item in goodsList" :key="item.goods_id"
						:url="`/pages/goodDetail/goodDetail?goods_id=${item.goods_id}`">
						<!-- 左侧图片容器 -->
						<view class="goods_img_wrap">
							<image :src="item.goods_small_logo?item.goods_small_logo
								:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'" mode="widthFix">
							</image>
						</view>
						<!-- 右侧 商品容器 -->
						<view class="goods_info_wrap">
							<view class="goods_name">{{item.goods_name}}</view>
							<view class="goods_price">
								￥{{item.goods_price}}
							</view>
						</view>
					</navigator>
				</view>
			</block>
			<block v-if="tabs[1].isActive">1</block>
			<block v-if="tabs[2].isActive">2</block>
		</Tabs>
	</view>
</template>

<script>
	import {
		request
	} from "../../utils/api.js";
	export default {
		data() {
			return {
				tabs: [{
						id: 0,
						value: "综合",
						isActive: true
					},
					{
						id: 1,
						value: "销量",
						isActive: false
					},
					{
						id: 2,
						value: "价格",
						isActive: false
					},
				],
				goodsList: [],
				QueryParams: {
					query: "",
					cid: "",
					pagenum: 1,
					pagesize: 10
				},
				totalPages:1
			}
		},
		onLoad(options) {
			this.QueryParams.cid = options.cid || "";
			this.QueryParams.query = options.query || "";
			this.getGoodsList();
		},
		onReachBottom(){
			if(this.QueryParams.pagenum>=this.totalPages){
				uni.showToast({
					title:'没有下一页数据',
					icon:'none'
				})
			}else{
				this.QueryParams.pagenum++;
				this.getGoodsList()
			}
		},
		onPullDownRefresh(){
			this.goodsList=[];
			this.QueryParams.pagenum=1;
			this.getGoodsList();
		},
		methods: {
			async getGoodsList(){
				const res=await request({url:'/goods/search',data:this.QueryParams});
				// console.log(res)
				const total=res.total;
				this.totalPages=Math.ceil(total/this.QueryParams.pagesize)
				this.goodsList=[...this.goodsList,...res.goods]
				// console.log(this.getGoodsList)
				uni.stopPullDownRefresh();
			},
			tabsItemChange(index){
				this.tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>

.first_tab{
  .goods_item{
    display: flex;
    border-bottom: 1px solid #ccc;
    .goods_img_wrap{
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        width: 70%;
      }
    }
    .goods_info_wrap{
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name{
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
      }
      .goods_price{
        color: $theme-color;
        font-size: 32rpx;
      }
    }
  }
}
</style>
